<template>
  <div id="home">
    <!-- <div class="center"> -->
    <el-container>
      <el-aside width="auto">
        <el-menu default-active="1" router :unique-opened="true" @open="handleOpen" style="background-color: #000;"
          @close="handleClose" :collapse="isCollapse">
          <div class="logo" style="border: 0px solid #000;">
            <img src="@/assets/images/crm_logo.png" alt=""
              style="padding-top: 30px;padding-left: 35px;padding-bottom: 20px;width: 70%;">
          </div>
          <!-- 没有二级菜单只显示一级菜单 -->
          <el-menu-item v-for="(item,index) in menu" :key="index" :index="item.url" v-if="!item.children"
            v-bind:class="{ active: isActive }">
            <!-- <template slot="title"> -->
            <img :src="item.imgUrl" alt="" style="margin-left: 12px;width: 25px;position: relative;top: -5px;">
            <span class="menu">{{item.title}}</span>
            <!-- </template> -->
          </el-menu-item>
          <!-- 有二级菜单显示二级菜单 -->
          <el-submenu v-else :key="index" :index="item.url">
            <template slot="title">
              <img :src="item.imgUrl" alt="" style="margin-left: 12px;width: 25px;position: relative;top: -5px;">
              <span class="menu">{{item.title}}</span>
            </template>
            <div class="er">
              <el-menu-item v-for="(item1,index1) in item.children" :key="index1" :index="item1.url">
                <span style="position: absolute;left: 28px;top: -8px;">.</span><span
                  style="position: absolute;top: -4px;">{{item1.title}}</span>
              </el-menu-item>
            </div>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="top">
            <div class="left" style="margin:10px;float: left;">
              <i class="el-icon-s-grid toggle" @click="toggleCollapse"></i>
              <el-button @click="dialogVisible = true">添加提醒</el-button>
              <span class="tx" style="cursor: pointer;">
                <el-dropdown style="margin-left: 5px;position: relative;top: -15px;font-weight: 600;cursor: pointer;">
                  <i class="el-icon-chat-dot-square" style="color: red;"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <span @click="dialogFormVisible1 = true"> 新消息</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <span @click="dialogFormVisible2 = true"> 待提醒</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>

            <div class="right" style="float: right;">
              <ul style="list-style: none;padding-right: 50px; ">
                <li style="float: left;padding-right: 10px;" v-model="realname">
                  <img src="@/assets/images/linkman.jpg" alt="" style="width: 40px;border-radius: 20px;">
                  <el-dropdown style="margin-left: 5px;position: relative;top: -15px;font-weight: 600;cursor: pointer;">
                    <span class="el-dropdown-link">
                      {{realname}} |
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <span @click="dialogFormVisible = true"> 修改密码</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li style="float: left;position: relative;top: 8px;font-weight: 600;color: #fe0100;" @click="loginout">
                  退出</li>
              </ul>
            </div>
          </div>
          <el-dialog title="提示" :visible.sync="dialogFormVisible" width="30%">
            <el-form>
              <el-form-item label="原始密码" prop="pass">
                <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"
                  style="border: 1px solid #000;"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"
                  style="border: 1px solid #000;"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updatePassword">确 定</el-button>
            </span>
          </el-dialog>
        </el-header>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <el-form :model="warnForm">
            <el-form-item label="提醒事件">
              <el-input type="textarea" style=" border: 0px solid #b6b6b6;
              border-radius: 15px;
              /* overflow: hidden; */
              width: 300px;
              /* height: 100px; */
              position: relative;
              top: 0;" autosize v-model="warnForm.warnContent"></el-input>
            </el-form-item>
            <el-form-item label="提醒时间"><br>
              <el-date-picker v-model="warnForm.warnTime" type="datetime" placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss" style=" border: 1px solid #b6b6b6; 
              border-radius: 50px;
              overflow: hidden;
              width: 300px;
              position: relative;
              top: 0;">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addWarn()">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="新消息" :visible.sync="dialogFormVisible1" width="30%">
          <ul style="list-style: none;">
            <li v-for="(item,index) in warnList" :key="index" style="border-bottom: 1px solid #696969;">
              <p>消息内容：{{item.warnContent}}</p>
              <p>提醒时间：{{item.warnTime}}</p>
            </li>
          </ul>
        </el-dialog>
        <el-dialog title="待提醒" :visible.sync="dialogFormVisible2" width="30%">
          <ul style="list-style: none;">
            <li v-for="(item,index1) in warnList" :key="index1" style="border-bottom: 1px solid #696969;">
              <p>消息内容：{{item.warnContent}}</p>
              <p>提醒时间：{{item.warnTime}}</p>
            </li>
          </ul>
        </el-dialog>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <!-- </div> -->
  </div>
</template>
<script>

  export default {

    data() {
      return {
        isCollapse: false,
        isActive: true,
        current: 1,
        size: 100,
        status: '',
        dialogVisible: false,
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        input3: '',
        select: '',
        realname: this.$cookies.get("realname"),
        ruleForm: {
          userId: this.$cookies.get("userId"),
          username: this.$cookies.get("username"),
          oldPassword: '',
          newPassword: ''
        },
        warnForm: {
          warnContent: '',
          warnTime: '',
          userId: this.$cookies.get("userId"),
        },
        warnList: [],
        menu: [{
          id: 1,
          title: '首 页',
          url: '/index',
          imgUrl: require('@/assets/images/crm_26.png'),
        },
        {
          id: 3,
          title: '财务管理',
          url: '/apply',
          imgUrl: require('@/assets/images/crm_55.png'),
          children: [
            {
              id: 3 - 1,
              title: '报销管理',
              url: '/apply',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
            {
              id: 3 - 2,
              title: '财务报表',
              url: '/applytable',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
          ]
        },

        ],
        // user: [
        //   {
        //     id: 3,
        //     title: '张三',
        //     imgUrl: require('@/assets/images/linkman.jpg'),

        //   }
        // ]
      }
    },
    mounted() {
      // var realname = this.$cookies.get("realname");
      // alert(realname)
      var userAuth = this.$cookies.get("userAuth");
      if (userAuth.includes("e") || userAuth.includes("f")) {
        this.menu.push({
          id: 2,
          title: '销售管理',
          url: '/change',
          imgUrl: require('@/assets/images/crm_50.png'),
          children: [
            {
              id: 2 - 1,
              title: '销售列表',
              url: '/changetable',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
            {
              id: 2 - 2,
              title: '销售面板',
              url: '/changeface',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
            {
              id: 2 - 3,
              title: '底层数据',
              url: '/changedata',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
          ]
        })
      };
      if (userAuth.includes("d")) {
        this.menu.push({
          id: 4,
          title: '合同管理',
          url: '/agreement',
          imgUrl: require('@/assets/images/crm_59.png'),
          children: [
            {
              id: 4 - 1,
              title: '合同列表',
              url: '/agreementtable',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
            {
              id: 4 - 2,
              title: '合同面板',
              url: '/agreementface',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
          ]
        })
      };
      if (userAuth.includes("c")) {
        this.menu.push({
          id: 5,
          title: '客户管理',
          url: '/custem',
          imgUrl: require('@/assets/images/crm_61.png'),
          children: [
            {
              id: 5 - 1,
              title: '客户资料',
              url: '/custem',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
            {
              id: 5 - 2,
              title: '联系人资料',
              url: '/linkman',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
          ]
        })
      };
      if (userAuth.includes("b")) {
        this.menu.push({
          id: 6,
          title: '人资管理',
          url: '/staff',
          imgUrl: require('@/assets/images/crm_64.png'),
        })
      };
      this.menu.push({
        id: 8,
        title: 'OA 系统',
        url: '/oasystem',
        imgUrl: require('@/assets/images/crm_56.png'),
      })
      this.menu.push({
        id: 9,
        title: '固定资产',
        url: '/fixed',
        imgUrl: require('@/assets/images/crm_56.png'),
      })
      if (userAuth.includes("i")) {
        this.menu.push({
          id: 7,
          title: '系统管理',
          url: '/system',
          imgUrl: require('@/assets/images/crm_56.png'),
          children: [
            {
              id: 7 - 1,
              title: '字典管理',
              url: '/system',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
            {
              id: 7 - 2,
              title: '计划经费配比',
              url: '/section',
              imgUrl: require('@/assets/images/crm_50.png'),
            },
          ]
        })
      };

      this.getWarnList()
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath)
      },
      toggleCollapse() {
        console.log(123456789);

        this.isCollapse = !this.isCollapse
      },
      loginout() {
        //清空sessionStorage
        window.sessionStorage.clear();
        this.$router.push('/login');
      },
      //修改用户密码
      updatePassword() {
        var data = this.ruleForm
        var userId = this.ruleForm.userId
        var username = this.ruleForm.username
        var oldPassword = this.ruleForm.oldPassword
        var newPassword = this.ruleForm.newPassword
        this.$API.user.updatePassword(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("修改成功！");
            this.dialogFormVisible = false;
            //     window.sessionStorage.clear();
            // this.$router.push('/login');
            // this.getScheduleList()
          } else {
            this.$message.error("修改失败！");
          }
        })

      },
      getWarnList() {
        var data = {
          current: 1,
          size: 100,
          //  status:'0'
        }
        this.$API.warn.reqWarnList(data).then(res => {
          if (res.data.code == 200) {
            this.warnList = res.data.data
          } else {
            this.$message.error("查询失败！");
          }
        })

      },
      // 添加提醒
      addWarn() {
        var data = this.warnForm;
        if (data.warnContent == '') {
          this.$message("联系人名称不能为空")
        } else {
          this.$API.warn.reqAddWarn(data).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功！");
              this.dialogVisible = false;
              this.getWarnList();
            } else {
              this.$message.error("添加失败！");
            }
          })
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }

</script>
<style lang="scss" scoped>
  @import "../../style/style.css";

  #home {
    width: 100%;
    height: 100%;

    .el-menu-admin:not(.el-menu--collapse) {
      width: 200px;
      min-height: 800px;
    }

    .el-container {
      height: 100%;
    }

    .el-aside {
      background-color: #161616;
    }

    .el-header {
      background-color: #fff;
      height: auto !important;
      width: auto;
    }

    .toggle {
      font-size: 25px;
      color: #161616;
      cursor: pointer;
      line-height: 30px;
    }
   
    /* .el-submenu .el-menu {
      background: none !important;
      padding-left: 35px;
      border: none;
    } */

    .active {
      background-color: transparent !important;
      height: 56px !important;
      margin: 0 !important;
    }

    .el-menu-item.is-active {
      height: 43px;
      border-radius: 50px;
      transition: width 2s;
      background-color: #fe0100;

    }



    .el-main {
      text-align: center;
      overflow: visible;
    }

    .el-menu-item {
      height: 43px;
      margin-left: 30px;
      color: #fff !important;
      /* color: rgb(175, 49, 49) !important; */
      /* transition: none !important; */
      min-width: 100px;
      transition: all 0.5s
    }

    .el-menu-item:focus,
    .el-menu-item:hover {
      border: 0px solid #6e74f2;
      /* background-color: #6e74f2; */
      height: 43px;
      /* background: none; */

    }

    .menu {
      margin-left: 18px;
      font-size: 16px;
      color: #fff;
      position: absolute;
      top: -4px;
      font-family: "Microsoft Yahei";
    }

    .el-menu-item:focus .menu {
      color: rgb(241, 8, 8);

    }

    .el-header {
      padding: 0;
    }

    .input-with-select {
      border-radius: 100px;
      height: 42px;
      border: none !important;
    }

    .el-select .el-input {
      width: 100px;
      background-color: #efeff2;
      border: none !important;

    }

    .el-input__inner {
      border: none;
      /* background-color: #f5f5f7; */
      height: 42px;
    }

    .el-input-group__append {
      border: none;
    }

    .el-textarea__inner {
      height: 200px !important;
    }

  }
</style>